<template>
  <v-chart :autoresize="true" :manual-update="true"
           theme="shine"
           ref="chart" class="chart"/>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import dayjs from 'dayjs';
import { round } from 'number-precision';
import { getOilsRise } from '@/api/dataScreen';

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;

      yData = [] as any;

      seriesData = [] as any;
    }());

    const chart = ref();

    const initOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        position(p) { // 其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        },
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '30%',
        containLabel: true,
      },
      legend: {
        data: ['升数', '实收金额', '油机金额'],
        x: 'right',
        top: '3%',
        left: '60%',
        itemWidth: 10, // 图例的宽度
        itemHeight: 10, // 图例的高度
        textStyle: { // 图例文字的样式
          color: '#fff',
          fontSize: '0.65rem',
        },
      },
      xAxis: [{
        show: true,
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.65rem',
          },
          // rotate: 20,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(211 ,211 ,211,0.5)',
          },
        },
        axisTick: { show: false },
        splitLine: {
          show: false,
        },
      },
      {
        show: false,
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.65rem',
          },
          // rotate: 20,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(211 ,211 ,211,0.5)',
          },
        },
        axisTick: { show: false },
        splitLine: {
          show: false,
        },
      }],
      yAxis: [{
        type: 'category',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: { show: false },
        axisLabel: {
          fontSize: '0.65rem',
          color: '#fff',
        },

      },
      ],
      series: [
        {
          name: '升数',
          type: 'bar',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  { offset: 0, color: '#7bbfea' },
                  { offset: 0.5, color: '#33a3dc' },
                  { offset: 1, color: '#228fbd' },
                ],
              },
            },
          },
          xAxisIndex: 1,
          label: {
            show: true,
            position: 'right',
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem',
            },
            formatter(data) {
              return `${data.value}升`;
            },
          },

        },
        {
          name: '实收金额',
          type: 'bar',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  { offset: 0, color: '#c76968' },
                  { offset: 0.5, color: '#b3424a' },
                  { offset: 1, color: '#d93a49' },
                ],
              },
            },
          },
          label: {
            show: true,
            position: 'right',
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem',
            },
            formatter(data) {
              return `${data.value}万元`;
            },
          },

        },
        {
          name: '油机金额',
          type: 'bar',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  { offset: 0, color: '#73b9a2' },
                  { offset: 0.5, color: '#72baa7' },
                  { offset: 1, color: '#00ae9d' },
                ],
              },
            },
          },
          label: {
            show: true,
            position: 'right',
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem',
            },
            formatter(data) {
              return `${data.value}万元`;
            },
          },

        },
      ],
    };

    async function getData(stationCode: number, searchDate: any) {
      // console.log(stationCode);
      state.list = await getOilsRise(stationCode, dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'));
      console.log(state.list)
      // console.log('油品销售升数与数量', state.list);
      if (state.list && state.list[0]) {
        dealChartData();
      }
    }

    function dealChartData() {
      state.yData = [];
      state.seriesData[0] = [];
      state.seriesData[1] = [];
      state.seriesData[2] = [];
      for (const item of state.list) {
        state.yData.push(item['油品名称']);
        state.seriesData[0].push(item['区间销售升数']);
        state.seriesData[1].push(item['区间实收金额(万元)']);
        state.seriesData[2].push(item['区间油机金额(万元)']);
      }
      console.log(state.seriesData)
      const max1 = state.seriesData[0].reduce((a, b) => (b > a ? b : a));
      const max2 = state.seriesData[1].reduce((a, b) => (b > a ? b : a));
      initOptions.xAxis[0].max = round(max2 * 1.3, 0);
      initOptions.xAxis[1].max = round(max1 * 1.3, 0);
      initOptions.yAxis[0].data = state.yData;
      initOptions.series[0].data = state.seriesData[0];
      initOptions.series[1].data = state.seriesData[1];
      initOptions.series[2].data = state.seriesData[2];
      chart.value.setOption(initOptions);
    }

    return {
      getData,
      chart,
    };
  },
});

export class index {
}
</script>

<style scoped>

</style>
